<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">欢迎使用 Vue3 Monorepo</h1>
        <p class="text-xl text-gray-600">这是一个基于 Monorepo 架构的 Vue3 前端项目</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold text-blue-600 mb-4">技术栈</h3>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
              Vue 3 + JavaScript
            </li>
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
              Vite + Element Plus
            </li>
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
              Tailwind CSS + SCSS
            </li>
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
              Pinia + Vue Router
            </li>
          </ul>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold text-green-600 mb-4">Monorepo 工具</h3>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
              pnpm + Workspace
            </li>
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
              lerna-lite
            </li>
            <li class="flex items-center text-gray-700">
              <span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
              turborepo
            </li>
          </ul>
        </div>
      </div>
      
      <div class="bg-blue-50 rounded-lg p-6 text-center">
        <h3 class="text-xl font-semibold text-blue-800 mb-4">公共组件演示</h3>
        <BaseButton @click="handleClick" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
          点击我
        </BaseButton>
      </div>

      <!-- Tailwind CSS 测试区域 -->
      <div class="mt-8 bg-white rounded-lg shadow-md p-6">
        <h3 class="text-xl font-semibold text-purple-600 mb-4">Tailwind CSS 测试</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-red-100 text-red-800 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold">红</div>
            <div class="text-sm">Red</div>
          </div>
          <div class="bg-green-100 text-green-800 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold">绿</div>
            <div class="text-sm">Green</div>
          </div>
          <div class="bg-blue-100 text-blue-800 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold">蓝</div>
            <div class="text-sm">Blue</div>
          </div>
          <div class="bg-yellow-100 text-yellow-800 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold">黄</div>
            <div class="text-sm">Yellow</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { BaseButton } from '@mo/components'
import { useLocalStorage } from '@mo/composables'

const handleClick = () => {
  alert('公共组件工作正常！')
}
</script> 